<script setup>
import {
    Star,
    Setting,
    ChatDotRound,
    DocumentCopy,
    CircleClose
} from '@element-plus/icons-vue'

import {getUser} from "@/components/userInfo.js";
import {useRoute} from "vue-router";


const route = useRoute()

</script>

<template>
    <div class="user-center">
        <el-container>
            <el-aside width="auto">
                <div class="menu-title">
                    <h2>个人中心</h2>
                </div>
                <el-menu
                    :default-active="route.path"
                    router
                    class="side-menu">
                    <el-menu-item index="/user/center/myCollect">
                        <el-icon><Star /></el-icon>
                        <span>我的收藏</span>
                    </el-menu-item>
                    <el-menu-item index="/user/center/myComment">
                        <el-icon><ChatDotRound /></el-icon>
                        <span>我的评论</span>
                    </el-menu-item>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon><setting /></el-icon>
                            <span>个人信息</span>
                        </template>
                        <el-menu-item index="/user/center/setIcon">更换头像</el-menu-item>
                        <el-menu-item index="/user/center/setUsername">修改用户名</el-menu-item>
                        <el-menu-item index="/user/center/setPassword">修改密码</el-menu-item>
                        <el-menu-item index="/user/center/setPhone">更换手机号</el-menu-item>
                        <el-menu-item index="/user/center/setEmail">更换邮箱</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-if="getUser.role === 0" index="/user/center/myApply">
                        <el-icon><DocumentCopy /></el-icon>
                        <span>申请成为商家</span>
                    </el-menu-item>
                    <el-menu-item v-if="getUser.role === 0" index="/user/center/myLogOff">
                        <el-icon><CircleClose /></el-icon>
                        <span>注销账号</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="center-main">
                <RouterView/>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped lang="scss">
.menu-title {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
}

.menu-title h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}
.user-center {
    width: 100%;
    min-height: 100vh;
    border: 1px solid #ebeef5;
}
.center-main {
    border-left: 1px solid #ebeef5;
}


.side-menu {
    width: 200px;
    height: auto;
    min-height: 100vh;
    border-right: none;
}


</style>